<template>
  <div class="watch--video--wrap">
    <video
      :src="videoSrc"
      class="video--self"
      ref="videoSelf"
      :id="video_id"
      v-if="hasInfo"
      crossorigin="anonymous"
    ></video>
    <div class="control--right">
      <div
        class="video--control--item"
        title="返回"
        @click="goback"
        v-show="measurePoints.length == 0"
      >
        <svg
          t="1682498950183"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="23514"
          width="50"
          height="50"
        >
          <path
            d="M648 307.2H217.6l128-128c12.8-12.8 12.8-32 0-44.8-12.8-12.8-32-12.8-44.8 0L118.4 315.2c-6.4 6.4-9.6 14.4-9.6 22.4s3.2 16 9.6 22.4l180.8 180.8c12.8 12.8 32 12.8 44.8 0 12.8-12.8 12.8-32 0-44.8L219.2 371.2H648c120 0 216 96 216 216s-96 216-216 216H320c-17.6 0-32 14.4-32 32s14.4 32 32 32h328c155.2 0 280-124.8 280-280s-124.8-280-280-280z"
            fill="#ffffff"
            p-id="23515"
          ></path>
        </svg>
      </div>
      <div
        class="video--control--item"
        title="返回"
        v-show="measurePoints.length > 0"
      >
        <a-popconfirm
          title="有测量数据,是否另存?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="confirmSave2('back')"
          @cancel="cancelSave('back')"
          placement="left"
        >
          <svg
            t="1682498950183"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="23514"
            width="50"
            height="50"
          >
            <path
              d="M648 307.2H217.6l128-128c12.8-12.8 12.8-32 0-44.8-12.8-12.8-32-12.8-44.8 0L118.4 315.2c-6.4 6.4-9.6 14.4-9.6 22.4s3.2 16 9.6 22.4l180.8 180.8c12.8 12.8 32 12.8 44.8 0 12.8-12.8 12.8-32 0-44.8L219.2 371.2H648c120 0 216 96 216 216s-96 216-216 216H320c-17.6 0-32 14.4-32 32s14.4 32 32 32h328c155.2 0 280-124.8 280-280s-124.8-280-280-280z"
              fill="#ffffff"
              p-id="23515"
            ></path>
          </svg>
        </a-popconfirm>
      </div>
      <div class="video--control--item" title="播放/暂停">
        <a-popconfirm
          title="有测量数据,是否另存?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="confirmSave2('play')"
          @cancel="cancelSave('play')"
          placement="left"
          v-show="videoStatus == 'noStart' && measurePoints.length > 0"
        >
          <a-icon
            type="play-circle"
            :style="{ color: '#fff', fontSize: '45px' }"
          />
        </a-popconfirm>
        <a-icon
          type="play-circle"
          @click="play"
          v-show="videoStatus == 'noStart' && measurePoints.length == 0"
          :style="{ color: '#fff', fontSize: '45px' }"
        />
        <svg
          type="pause"
          @click="pause"
          v-show="videoStatus == 'start'"
          t="1682500334549"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="26266"
          width="42"
          height="42"
        >
          <path
            d="M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0z m0 955.904c-244.736 0-443.904-199.168-443.904-443.904 0-244.736 199.168-443.904 443.904-443.904s443.904 199.168 443.904 443.904c0 244.736-199.168 443.904-443.904 443.904zM461.824 416.256v191.488a34.304 34.304 0 0 1-68.608 0V416.256c0-18.944 15.36-34.304 34.304-34.304 18.944 0.512 34.304 15.36 34.304 34.304z m168.96 0v191.488a34.304 34.304 0 0 1-68.608 0V416.256c0-18.944 15.36-34.304 34.304-34.304 18.944 0.512 34.304 15.36 34.304 34.304z"
            p-id="26267"
            fill="#ffffff"
          ></path>
        </svg>
      </div>
      <div
        class="video--control--item"
        title="另存"
        v-show="videoStatus == 'noStart'"
        @click="confirmSave"
        v-preventReClick
      >
        <svg
          t="1686105725427"
          class="icon"
          viewBox="0 0 1025 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6913"
          width="42"
          height="42"
        >
          <path
            d="M928.581 75.987A89.84 89.84 0 0 0 839.828 0H89.84A89.84 89.84 0 0 0 0 89.84v746.54a89.84 89.84 0 0 0 70.249 87.637A114.951 114.951 0 0 0 184.172 1024h655.352c57.208 0 104.852-19.374 137.774-56.034 31.212-34.777 47.716-83.435 47.716-140.773V189.098a114.879 114.879 0 0 0-96.433-113.11zM591.204 52.165v103.417a36.965 36.965 0 0 1-36.921 36.922H375.299a36.965 36.965 0 0 1-36.922-36.922V52.165zM52.165 836.351V89.84A37.675 37.675 0 0 1 89.84 52.165h196.372v103.417A89.086 89.086 0 0 0 375.3 244.67H554.34a89.1 89.1 0 0 0 89.028-89.087V52.165h196.46a37.675 37.675 0 0 1 37.674 37.675v746.54a37.675 37.675 0 0 1-37.675 37.674h-93.926V638.283a89.1 89.1 0 0 0-89.086-89.1H272.823a89.1 89.1 0 0 0-89.086 89.085v235.728H89.84a37.675 37.675 0 0 1-37.675-37.645z m641.572 37.674H235.844V638.283a36.965 36.965 0 0 1 36.98-36.936h383.992a36.965 36.965 0 0 1 36.921 36.921z m279.112-46.92c0 91.927-48.586 144.643-133.31 144.643H184.172a62.8 62.8 0 0 1-60.396-45.586h716.052a89.84 89.84 0 0 0 89.84-89.84V129.76a62.598 62.598 0 0 1 43.21 59.41z"
            p-id="6914"
            :fill="measurePoints.length > 0 ? '#ffffff' : '#707070'"
          ></path>
          <path
            d="M511.725 71.915h0.884q25.445 0 25.445 25.445v38.95q0 25.445-25.445 25.445h-0.884q-25.445 0-25.445-25.445V97.36q0-25.445 25.445-25.445z"
            p-id="6915"
            :fill="measurePoints.length > 0 ? '#ffffff' : '#707070'"
          ></path>
        </svg>
      </div>
      <div
        class="video--control--item"
        title="上一帧"
        v-if="videoStatus == 'noStart' && measurePoints.length == 0"
        @click="goFrame('prev')"
        v-preventReClick
      >
        <svg
          t="1682499102553"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="23817"
          width="40"
          height="40"
        >
          <path
            d="M681.48 120.49V903.5L64 512l617.48-391.51z m278.52 0V903.5H791.84V120.49H960z"
            p-id="23818"
            fill="#ffffff"
          ></path>
        </svg>
      </div>
      <div
        class="video--control--item"
        title="上一帧"
        v-if="videoStatus == 'noStart' && measurePoints.length > 0"
      >
        <a-popconfirm
          title="有测量数据,是否另存?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="confirmSave2('frame', 'prev')"
          @cancel="cancelSave('frame', 'prev')"
          placement="left"
          v-show="videoStatus == 'noStart' && measurePoints.length > 0"
        >
          <svg
            t="1682499102553"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="23817"
            width="40"
            height="40"
          >
            <path
              d="M681.48 120.49V903.5L64 512l617.48-391.51z m278.52 0V903.5H791.84V120.49H960z"
              p-id="23818"
              fill="#ffffff"
            ></path>
          </svg>
        </a-popconfirm>
      </div>
      <div
        class="video--control--item"
        title="下一帧"
        v-if="videoStatus == 'noStart' && measurePoints.length == 0"
        @click="goFrame('next')"
        v-preventReClick
      >
        <svg
          t="1682499129542"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2484"
          width="40"
          height="40"
        >
          <path
            d="M342.52 120.49v783.02L960 512 342.52 120.49z m-278.52 0v783.02h168.16V120.49H64z"
            p-id="2485"
            fill="#ffffff"
          ></path>
        </svg>
      </div>
      <div
        class="video--control--item"
        title="下一帧"
        v-if="videoStatus == 'noStart' && measurePoints.length > 0"
      >
        <a-popconfirm
          title="有测量数据,是否另存?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="confirmSave2('frame', 'next')"
          @cancel="cancelSave('frame', 'next')"
          placement="left"
          v-show="videoStatus == 'noStart' && measurePoints.length > 0"
        >
          <svg
            t="1682499129542"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2484"
            width="40"
            height="40"
          >
            <path
              d="M342.52 120.49v783.02L960 512 342.52 120.49z m-278.52 0v783.02h168.16V120.49H64z"
              p-id="2485"
              fill="#ffffff"
            ></path>
          </svg>
        </a-popconfirm>
      </div>
      <div
        class="video--control--item"
        title="倍速"
        v-if="videoStatus == 'start'"
      >
        <svg
          @click="speed('quicken')"
          t="1682500393456"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="26464"
          width="50"
          height="50"
        >
          <path
            d="M512 951.04a435.2 435.2 0 1 1 435.2-435.2 435.2 435.2 0 0 1-435.2 435.2z m0-819.2a384 384 0 1 0 384 384A384 384 0 0 0 512 132.096z"
            p-id="26465"
            fill="#ffffff"
          ></path>
          <path
            d="M468.992 493.824l-130.048-75.008a20.992 20.992 0 0 0-31.232 18.176v150.016a20.992 20.992 0 0 0 31.232 18.176l130.048-75.008a20.992 20.992 0 0 0 0-36.352zM684.8 493.824l-129.536-75.008a21.248 21.248 0 0 0-31.744 18.432v149.504a21.248 21.248 0 0 0 31.744 18.432l129.536-75.008a20.992 20.992 0 0 0 0-36.352z"
            p-id="26466"
            fill="#ffffff"
          ></path>
        </svg>
        <span class="speed-w">x{{ curSpeed }}</span>
      </div>
      <div
        :class="['video--control--item', { noactive: lesionInfo.length == 0 }]"
        title="上一节点"
        v-if="videoStatus == 'start'"
      >
        <svg
          @click="goNext('prev')"
          t="1682500535821"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="27490"
          width="45"
          height="45"
        >
          <path
            d="M803.584 134.592c-18.176-10.048-39.936-10.112-58.112 0L192 443.008l0-282.88c0-17.664-14.336-32-32-32S128 142.464 128 160.128l0 344.896C127.744 507.2 127.104 509.248 127.104 511.488S127.744 515.84 128 518.016l0 346.112c0 17.664 14.336 32 32 32s32-14.336 32-32L192 579.968l553.408 308.352C754.56 893.44 764.48 896 774.528 896s19.968-2.56 29.056-7.616c18.176-10.112 28.992-28.224 28.992-48.576L832.576 183.104C832.576 162.88 821.76 144.768 803.584 134.592zM768.192 829.248 198.016 511.488 771.328 192 768.192 829.248z"
            p-id="27491"
            :fill="lesionInfo.length == 0 ? '#707070' : '#ffffff'"
          ></path>
        </svg>
      </div>
      <div
        :class="['video--control--item', { noactive: lesionInfo.length == 0 }]"
        title="下一节点"
        v-if="videoStatus == 'start'"
      >
        <svg
          @click="goNext('next')"
          t="1682500551320"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3502"
          width="45"
          height="45"
        >
          <path
            d="M832 160.128c0-17.664-14.336-32-32-32S768 142.464 768 160.128l0 282.88L214.592 134.592c-18.176-10.112-39.936-10.048-58.112 0C138.24 144.768 127.424 162.88 127.424 183.168l0 656.64c0 20.224 10.816 38.464 29.056 48.576C165.568 893.44 175.488 896 185.472 896s19.968-2.56 29.056-7.616L768 579.968l0 284.096c0 17.664 14.336 32 32 32s32-14.336 32-32L832 160.128zM191.808 829.248 188.672 192l573.312 319.488L191.808 829.248z"
            p-id="3503"
            :fill="lesionInfo.length == 0 ? '#707070' : '#ffffff'"
          ></path>
        </svg>
      </div>
      <div
        :class="['video--control--item', { active: isDraw }]"
        title="测量"
        v-show="videoStatus == 'noStart'"
        @click="measureHandle"
        v-preventReClick
      >
        <svg
          t="1673513788195"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3221"
          width="50"
          height="50"
        >
          <path
            d="M43.933358 473.011011l938.177933 0.061398-0.01842 285.520849-938.178956-0.060375L43.933358 473.011011zM941.305285 717.802226l0.013304-203.943902-101.975618-0.00614-0.007163 122.366955c-0.001023 11.271718-9.134405 20.392446-20.397375 20.391423-11.262969 0-20.394305-9.122775-20.394305-20.394493l0.008187-122.366955-61.185985-0.004093-0.004093 61.182454c0 11.272741-9.133382 20.394493-20.396352 20.393469-11.262969 0-20.394305-9.123798-20.393281-20.396539l0.00307-61.182454-61.185985-0.004093-0.007163 122.367979c-0.001023 11.271718-9.133382 20.392446-20.397375 20.391423-11.263993 0-20.395328-9.122775-20.394305-20.394493l0.008187-122.366955-61.185985-0.004093-0.00307 61.182454c-0.001023 11.272741-9.133382 20.394493-20.398398 20.393469-11.260923 0-20.392258-9.123798-20.392258-20.396539l0.004093-61.182454-61.185985-0.004093-0.008187 122.366955c-0.001023 11.271718-9.133382 20.393469-20.397375 20.392446-11.263993 0-20.394305-9.122775-20.393281-20.394493l0.007163-122.366955-61.185985-0.004093-0.00307 61.182454c-0.001023 11.272741-9.132359 20.394493-20.396352 20.394493-11.262969-0.001023-20.395328-9.124821-20.394305-20.397562l0.00307-61.182454-61.184961-0.004093-0.008187 122.366955c0 11.271718-9.131335 20.392446-20.395328 20.391423-11.262969 0-20.396352-9.121751-20.395328-20.393469l0.008187-122.366955-101.975618-0.007163L84.706618 717.746968 941.305285 717.802226z"
            p-id="3222"
            :fill="!canMeasure ? '#707070' : '#ffffff'"
          ></path>
          <path
            d="M41.376011 335.577918l940.921529 0 0 53.721529-940.921529 0 0-53.721529Z"
            p-id="3223"
            :fill="!canMeasure ? '#707070' : '#ffffff'"
          ></path>
        </svg>
      </div>
      <div
        class="video--control--item"
        title="下一视频"
        v-if="videoS.length > 1"
        @click="videoByDir('right')"
        v-preventReClick
      >
        <svg
          t="1682499225630"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="24835"
          width="45"
          height="45"
        >
          <path
            d="M496.457514 918.259724c-246.323105 0-446.716134-200.392006-446.716134-446.702831 0-246.323105 200.39303-446.716134 446.716134-446.716134 246.309802 0 446.701808 200.39303 446.701808 446.716134C943.160345 717.867718 742.768339 918.259724 496.457514 918.259724zM496.457514 79.850629c-215.984123 0-391.706263 175.721117-391.706263 391.706263 0 215.985146 175.721117 391.691937 391.706263 391.691937S888.150474 687.542038 888.150474 471.556892C888.150474 255.57277 712.44266 79.850629 496.457514 79.850629z"
            fill="#ffffff"
            p-id="24836"
          ></path>
          <path
            d="M828.560284 485.310128c-7.602142 0-13.752212-6.151094-13.752212-13.752212 0-143.125745-96.30744-269.409916-234.195903-307.108516-7.318686-2.001587-11.644201-9.562796-9.643638-16.894785 2.001587-7.333012 9.643638-11.56336 16.895809-9.642614 149.814074 40.961924 254.449179 178.151469 254.449179 333.646939C842.313519 479.159034 836.162426 485.310128 828.560284 485.310128z"
            fill="#ffffff"
            p-id="24837"
          ></path>
          <path
            d="M515.004939 153.703661c-0.254803 0-0.51063 0-0.765433-0.026606-5.89629-0.322341-11.819187-0.483001-17.781992-0.483001-7.587815 0-13.752212-6.151094-13.752212-13.752212s6.164397-13.752212 13.752212-13.752212c6.460132 0 12.893658 0.188288 19.286252 0.537236 7.587815 0.403183 13.403265 6.889921 12.986779 14.477736C528.327362 148.023288 522.25711 153.703661 515.004939 153.703661z"
            fill="#ffffff"
            p-id="24838"
          ></path>
          <path
            d="M568.068482 597.062328c-20.992103 0-32.072463-15.512299-32.072463-36.086893L535.996019 382.125047c0-20.561291 11.43033-36.07359 32.877805-36.07359 7.789407 0 13.189394 2.109034 20.063965 6.083555l143.676283 89.633437c12.893658 7.453762 19.891026 18.815531 19.891026 30.957059-0.014326 11.416004-7.17133 21.931498-19.151176 28.821419l-145.019885 89.284489C581.174987 594.954317 575.722812 597.062328 568.068482 597.062328zM568.873824 373.556904c-2.37714 0-5.372358 0.618077-5.372358 8.568143l0 178.850387c0 7.735172 1.772366 8.582469 4.567016 8.582469 2.834558 0 3.41068-0.832971 6.123464-2.40477l146.066727-89.284489c3.988848-2.296299 4.740978-4.324492 4.740978-5.157463 0-1.249457-2.228761-4.351098-7.399527-7.333012l-142.628418-89.633437C572.606845 374.389876 571.828109 373.556904 568.873824 373.556904z"
            fill="#ffffff"
            p-id="24839"
          ></path>
          <path
            d="M358.636588 597.062328c-19.527752 0-28.928866-15.176654-28.928866-36.086893L329.707722 382.125047c0-20.911262 9.549493-36.07359 29.277814-36.07359 7.184633 0 12.255115 2.109034 19.145036 6.083555l141.507898 89.687672c12.435217 7.184633 19.21769 18.305925 19.205411 30.258141 0 11.643178-7.359618 22.37459-19.662829 29.465079l-140.943033 89.190345C370.932636 594.954317 365.754706 597.062328 358.636588 597.062328zM358.986559 373.556904c-4.337795 0-1.772366 2.874467-1.772366 8.568143l0 178.850387c0 8.582469-0.107447 8.582469 1.423419 8.582469 1.598404 0 1.860371-0.416486 5.311982-2.40477l141.991921-89.190345c4.511757-2.618641 5.412266-4.91494 5.412266-5.895267 0-1.181919-2.042519-3.935636-6.809079-6.688329l-140.460032-89.687672C361.799628 374.389876 361.350396 373.556904 358.986559 373.556904z"
            fill="#ffffff"
            p-id="24840"
          ></path>
        </svg>
      </div>
    </div>
    <div class="video--control" v-if="showprogress">
      <div class="video-progress">
        <div
          class="video-progress-pointer"
          :style="{ left: progressPointerLeft + '%' }"
        ></div>
      </div>
      <div class="video-scan-pos--box">
        <div
          :class="[
            'video-scan-pos',
            { normal: item.normal == 1, unusual: item.normal == 0 },
          ]"
          v-for="(item,index) in scanInfo"
          :key="item.ScanPose +index   || item.width + index"
          :style="{ width: item.width + 'px', left: item.left + '%' }"
        >
          <div class="video-posWord-box">
            <span class="video-scan-posWord" :title="item.conW">{{
              item.conW
            }}</span>
          </div>
        </div>
      </div>
      <div class="video-progress-time start">
        <span>{{ curTime }}</span>
      </div>
      <div class="video-progress-time end">
        <span>{{ totalTime }}</span>
      </div>
    </div>
    <video
      :src="videoSrc"
      class="video--self"
      ref="videoSelf"
      :id="video_id"
      v-if="!hasInfo"
      crossorigin="anonymous"
    ></video>
    <div class="video--measure--warp" v-show="canMeasure">
      <div
        :class="['video--measure--canvas', { active: canMeasure }]"
        :id="measure_id"
        ref="imageContainer"
      >
        <img
          :src="previewImg"
          alt=""
          class="measureImg"
          crossOrigin="anonymous"
          v-show="previewImg"
          ref="image"
        />
        <canvas
          :id="canvas_id"
          :class="['video-canvas', { active: isDraw }]"
        ></canvas>
        <ul class="measure--datas" v-show="measurePoints.length > 0">
          <li class="measure--datas--sub">测距(cm)</li>
          <li
            class="measure--datas--item"
            v-for="(item, index) in measurePoints"
            :key="item.id"
          >
            <span>{{ index + 1 }}</span>
            <span class="measure--datas--item--w">距离</span>
            <span>{{ item.dis }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {
  artery2C,
  thyroid2C,
  allowShowArteryPos,
  allowShowThyroidPos,
  video2Img,
  px2cm,
  distance,
  convertBase64UrlToBlob3,
  getIpAndPortMore2,
} from "@/utils";

import { mapState } from "vuex";
import { v4 as uuidv4 } from "uuid";
import html2canvas from "html2canvas";
import { getVideoParamById } from "@/api/videoParamInfo";
import { uploadMeasureImage, addMeasureImage } from "@/api/FCSCenter";
// import { updateRecord, getRecordById } from "@/api/record";
// import { getVideoParamById } from "@/api/videoParam";
export default {
  name: "VideoComp",
  props: ["videoSrc", "status", "videoId", "videoS", "curDocRecord"],
  data() {
    return {
      info: "",
      hasInfo: false, //是否有视频参数
      videoStatus: "noStart", //视频当前状态
      duration: "", //视频总时长
      currentTime: 0, //视频当前进度
      progressPointerLeft: 0, //视频指针
      scanInfo: [], //关键帧参数
      curSpeed: 1, //视频当前速度
      curFrame: -1, //视频当前关键帧
      speedIndex: 0,
      speedArrs: [1, 1.5, 2, 3, 0.5, 0.75],
      curRealFrame: 0, //真实关键帧参数
      showprogress: false,
      VideoParam: null, //测量的参数
      canvas: null, //
      ctx: null,
      width: "",
      height: "",
      isDraw: false, //是否在测量
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      fristClick: false, //左键第一次点击
      secondClick: false,
      real_dis: 0, //真实的测量距离
      imgData: null, //暂存的canvas数据
      temporaryImgData: null, //临时的canvas数据
      canMeasure: false, //是否可以测量
      measurePoints: [], //点集合
      chosePointIndex: null, //选中点的索引
      previewImg: "",
      scaleFactor: 0.1, // 缩放因子
      scale: 1,
      lesionInfo: [], //病灶
      video_id: `v${uuidv4()}`,
      canvas_id: `c${uuidv4()}`,
      measure_id: `m${uuidv4()}`,
    };
  },
  computed: {
    ...mapState(["LOCAL_URL", "SERVERBASE_URL", "patIsOnline", "RECORD_URL"]),
    curTime() {
      const currentTime = Number(this.currentTime).toFixed(0);
      if (currentTime >= 60) {
        let m = Math.floor(currentTime / 60);
        let s = Math.floor(currentTime % 60);
        if (m < 10) {
          m = `0${m}`;
        }
        if (s < 10) {
          s = `0${s}`;
        }
        return `${m}:${s}`;
      } else if (currentTime >= 10 && currentTime < 60) {
        return `00:${currentTime}`;
      } else {
        return `00:0${currentTime}`;
      }
    },
    totalTime() {
      if (this.duration) {
        if (this.duration > 60) {
          let m = Math.floor(this.duration / 60);
          let s = Math.floor(this.duration % 60);
          if (m < 10) {
            m = `0${m}`;
          }
          if (s < 10) {
            s = `0${s}`;
          }
          return `${m}:${s}`;
        } else if (this.duration >= 10 && this.duration < 60) {
          return `00:${this.duration}`;
        } else {
          return `00:0${this.duration}`;
        }
      } else {
        return `00:00`;
      }
    },
    req_url() {
      return this.RECORD_URL;
    },
  },
  watch: {
    status(val) {
      if (!val) {
        document.removeEventListener("keyup", this.listenerKeyUp);
        this.resetInfo();
        const video = document.querySelector(`#${this.video_id}`);
        video.removeEventListener("loadeddata", this.videoLoadeddata);
        video.removeEventListener("timeupdate", this.videoTimeupdate);
        video.removeEventListener("ended", this.videoEnded);
      } else if (val) {
        this.initVideo();
        document.removeEventListener("keyup", this.listenerKeyUp);
        document.addEventListener("keyup", this.listenerKeyUp);
      }
    },
    currentTime(val) {
      try {
        if (val && this.duration) {
          this.progressPointerLeft = (val / this.duration) * 100;
          this.curRealFrame = val;
        }
      } catch (err) {
        console.log(err);
      }
    },
    canMeasure(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.initCanvas();
        });
      } else {
        this.resetCanvasData();
      }
    },
  },
  methods: {
    async initVideo() {
      try {
        const vm = this;
        this.resetInfo();
        let params, video;
        if (this.videoSrc && this.videoId) {
          params = await getVideoParamById(
            this.req_url,
            this.videoId,
            this.curDocRecord.patient_sn
          );
        }
        this.showprogress = true;
        if (params.data) {
          this.hasInfo = true;
          this.info = JSON.parse(params.data.params);
        }
        console.log("视频id", this.videoId);
        console.log("视频参数", params.data);
        this.$nextTick(() => {
          video = document.querySelector(`#${this.video_id}`);
          video.src = this.videoSrc;
          video.addEventListener("loadeddata", vm.videoLoadeddata);
          video.addEventListener("timeupdate", vm.videoTimeupdate);
          video.addEventListener("ended", vm.videoEnded);
          const progressDom = document.querySelector(".video-progress");
          if (progressDom) {
            progressDom.removeEventListener("click", this.progressDomEvent);
            progressDom.addEventListener("click", this.progressDomEvent);
          }
        });
      } catch (err) {
        console.log(err);
      }
    },
    videoLoadeddata() {
      try {
        const video = document.querySelector(`#${this.video_id}`);
        const videoProgressW =
          document.querySelector(".video-progress").offsetWidth;
        console.log("进度条宽度:", videoProgressW);
        console.log("视频总时长:", video.duration);
        const vm = this;
        vm.duration = video.duration;
        if (this.hasInfo) {
          const new_info = [];
          const urlFilterName = this.dellVideoUrl(this.videoSrc);
          console.log("urlFilterName", urlFilterName);
          this.info.forEach((i) => {
            const canPush = this.dellDriByVideoUrl(
              urlFilterName,
              i.videoFileName
            );
            if (canPush) {
              if (i.ScanPart == "ARTERY") {
                if (
                  allowShowArteryPos.includes(i.ScanPose) ||
                  i.normal == "0"
                ) {
                  let i_item = {};
                  i_item = { ...i };
                  i_item.conW = artery2C[i.ScanPose];
                  i_item.width =
                    ((i.endTime - i.startTime) / vm.duration) * videoProgressW;
                  i_item.left = (i.startTime / vm.duration) * 100;
                  new_info.push(i_item);
                  if (i.normal == "0") {
                    vm.lesionInfo.push(i_item);
                  }
                }
              } else if (i.ScanPart == "THYROID") {
                if (
                  allowShowThyroidPos.includes(i.ScanPose) ||
                  i.normal == "0"
                ) {
                  let i_item = {};
                  i_item = { ...i };
                  i_item.conW = thyroid2C[i.ScanPose];
                  i_item.width =
                    ((i.endTime - i.startTime) / vm.duration) * videoProgressW;
                  i_item.left = (i.startTime / vm.duration) * 100;
                  new_info.push(i_item);
                  if (i.normal == "0") {
                    vm.lesionInfo.push(i_item);
                  }
                }
              }
            }
          });
          console.log("原始的视频信息", this.info);
          vm.scanInfo = [...new_info];
          console.log("处理过的视频信息", this.scanInfo);
          vm.play();
        } else {
          console.log("没有视频信息");
        }
      } catch (error) {
        console.log(error);
      }
    },
    videoTimeupdate() {
      try {
        const vm = this;
        const video = document.querySelector(`#${this.video_id}`);
        vm.currentTime = video.currentTime;
      } catch (error) {
        console.log(error);
      }
    },
    videoEnded() {
      try {
        const vm = this;
        console.log("视频停止播放");
        vm.videoStatus = "noStart";
        vm.progressPointerLeft = 0;
        vm.curFrame = -1;
        vm.curRealFrame = 0;
      } catch (error) {
        console.log(error);
      }
    },
    //返回
    goback() {
      console.log("返回");
      this.$emit("on-chosevideo");
    },
    //播放视频
    play() {
      try {
        if (this.previewImg) {
          this.previewImg = "";
        }
        this.canMeasure = false;
        const video = document.querySelector(`#${this.video_id}`);
        video.play();
        this.videoStatus = "start";
      } catch (err) {
        console.log(err);
      }
    },
    //有测量数据确定保存后播放
    confirmSave2(type, data) {
      try {
        const vm = this;
        //返回
        if (type == "back") {
          this.confirmSave(vm.goback);
        }
        //播放
        if (type == "play") {
          this.confirmSave(() => {
            if (vm.previewImg) {
              vm.previewImg = "";
            }
            vm.canMeasure = false;
            const video = document.querySelector(`#${this.video_id}`);
            video.play();
            vm.videoStatus = "start";
            vm.Caliper_stop();
          });
        }
        //下一帧
        if (type == "frame" && data) {
          this.confirmSave(() => {
            vm.Caliper_stop();
            vm.resetCanvasData();
            vm.Caliper_clear();
            vm.goFrame(data);
            //是否可以测量
            const { result, VideoParam, target, _index } = vm.isCanMeasuer(
              vm.currentTime,
              vm.info
            );
            vm.canMeasure = result;
            vm.VideoParam = VideoParam;
            console.log(
              "是否可以测量：",
              vm.canMeasure,
              "当前时间：",
              vm.currentTime,
              "测量参数:",
              VideoParam,
              "原始数据:",
              target,
              "_index：",
              _index
            );
            //如果可以测量生成当前帧画面
            if (vm.canMeasure) {
              const video = document.querySelector(`#${this.video_id}`);
              vm.previewImg = video2Img(video);
            }
          });
        }
      } catch (err) {
        console.log(err);
      }
    },
    //有测量数据取消保存后播放
    cancelSave(type, data) {
      try {
        //返回
        if (type == "back") {
          this.goback();
        }
        //播放
        if (type == "play") {
          if (this.previewImg) {
            this.previewImg = "";
          }
          this.canMeasure = false;
          const video = document.querySelector(`#${this.video_id}`);
          video.play();
          this.videoStatus = "start";
          this.Caliper_stop();
        }
        //下一帧
        if (type == "frame" && data) {
          this.Caliper_stop();
          this.resetCanvasData();
          this.Caliper_clear();
          this.goFrame(data);
          //是否可以测量
          const { result, VideoParam, target, _index } = this.isCanMeasuer(
            this.currentTime,
            this.info
          );
          this.canMeasure = result;
          this.VideoParam = VideoParam;
          console.log(
            "是否可以测量：",
            this.canMeasure,
            "当前时间：",
            this.currentTime,
            "测量参数:",
            VideoParam,
            "原始数据:",
            target,
            "_index：",
            _index
          );
          //如果可以测量生成当前帧画面
          if (this.canMeasure) {
            const video = document.querySelector(`#${this.video_id}`);
            this.previewImg = video2Img(video);
          }
        }
      } catch (err) {
        console.log(err);
      }
    },
    //暂停视频
    pause() {
      try {
        const video = document.querySelector(`#${this.video_id}`);
        video.pause();
        this.videoStatus = "noStart";
        //是否可以测量
        const { result, VideoParam, target, _index } = this.isCanMeasuer(
          this.currentTime,
          this.info
        );
        this.canMeasure = result;
        this.VideoParam = VideoParam;
        console.log(
          "是否可以测量：",
          this.canMeasure,
          "当前时间：",
          this.currentTime,
          "测量参数:",
          VideoParam,
          "原始数据:",
          target,
          "_index：",
          _index
        );
        //如果可以测量生成当前帧画面
        if (this.canMeasure) {
          this.previewImg = video2Img(video);
        }
      } catch (err) {
        console.log(err);
      }
    },
    //倍速
    speed(type) {
      try {
        if (type == "quicken") {
          this.speedIndex++;
          if (this.speedIndex > this.speedArrs.length - 1) {
            this.speedIndex = 0;
          }
        } else if (type == "moderate") {
          this.speedIndex--;
          if (this.speedIndex < 0) {
            this.speedIndex = this.speedArrs.length - 1;
          }
        }
        this.curSpeed = this.speedArrs[this.speedIndex];
        const video = document.querySelector(`#${this.video_id}`);
        video.playbackRate = this.curSpeed;
        console.log("倍速", this.curSpeed);
        console.log("video速度", video.playbackRate);
      } catch (err) {
        console.log("倍速err", err);
      }
    },
    //上一节点或下一节点
    goNext(type) {
      try {
        console.log("上一节点或下一节点", type);
        if (!this.hasInfo) {
          return;
        }
        if (this.lesionInfo.length == 0) {
          this.$message.warning("没有病灶信息!");
          return;
        }
        if (type == "next") {
          if (this.curFrame == this.lesionInfo.length - 1) {
            this.$message.warning("已经是最后一个节点");
            return;
          }
          this.curFrame++;
        } else if (type == "prev") {
          if (this.curFrame == -1) {
            this.$message.warning("已经是第一个节点");
            return;
          }
          this.curFrame--;
        }
        const video = document.querySelector(`#${this.video_id}`);
        console.log("curFrame", this.curFrame);
        if (this.lesionInfo[this.curFrame]) {
          video.currentTime = this.lesionInfo[this.curFrame].startTime;
          this.currentTime = this.lesionInfo[this.curFrame].startTime;
        }
      } catch (err) {
        console.log("上一节点或下一节点err", err);
      }
    },
    //另存
    async confirmSave(cb) {
      try {
        const vm = this;
        // if (this.isDraw) return;
        if (this.curDocRecord.state == 4 || this.curDocRecord.state == 6) {
          this.$message.warning("已出报告!");
          return;
        }
        if (this.measurePoints.length == 0) {
          return;
        }
        const save_img = await this._barPhotoCanvas();
        const save_imgBlob = convertBase64UrlToBlob3(save_img);
        if (save_imgBlob) {
          const form_data = new FormData();
          form_data.append("Data", save_imgBlob);
          const urlInfo = getIpAndPortMore2(this.videoSrc, 41023);
          form_data.append("SubDir", urlInfo.SubDir);
          form_data.append("FileName", urlInfo.FileName);
          const baseUrl = urlInfo.baseUrl;
          const post_param = {
            StorageIP: urlInfo.ip,
            SN: this.curDocRecord.patient_sn,
            RecordID: this.curDocRecord.id,
            SubDir: urlInfo.SubDir,
            FileName: urlInfo.FileName,
          };
          console.log("解析url", urlInfo);
          console.log("上传的图片信息", post_param);
          console.log("baseUrl", baseUrl);
          //测量图片上传到服务器
          const resp = await uploadMeasureImage(baseUrl, form_data);
          if (resp.code == 200) {
            console.log(
              "推送测量图像数据成功",
              resp.data,
              this.req_url,
              vm.req_url
            );
            //添加测量图像
            const recordRes = await addMeasureImage(this.req_url, post_param);
            if (recordRes.code == 200 && recordRes.data) {
              this.resetCanvasData();
              this.Caliper_clear();
              this.$message.success("另存成功");
              //回调函数
              if (cb && typeof cb == "function") {
                cb();
              }
              this.$EventBus.$emit(
                "updateReport",
                this.curDocRecord.id,
                "update",
                this.curDocRecord.patient_sn
              );
            } else {
              this.$message.error(`测量图片上传到服务器失败,${recordRes.msg}`);
            }
          } else {
            this.$message.error(`测量图片上传到服务器失败,${resp.msg}`);
          }
        } else {
          console.log("没有图片信息");
        }
      } catch (err) {
        console.log(err);
      }
    },
    //测量后截图
    _barPhotoCanvas() {
      return new Promise((resolve) => {
        try {
          const reportMeasure = document.querySelector(`#${this.measure_id}`);
          if (reportMeasure) {
            html2canvas(reportMeasure, {
              useCORS: true,
              // scale: 2,
              // dpi: 192,
              backgroundColor: null,
              allowTaint: true,
              ignoreElements: (element) => {
                if (element.tagName.toLowerCase() === "iframe") {
                  return element;
                }
                return false;
              },
            }).then(async (canvas) => {
              const img = canvas.toDataURL("image/jpg", 1);
              resolve(img);
            });
          }
        } catch (err) {
          console.log(err);
        }
      });
    },
    //上一帧或下一帧
    goFrame(type) {
      try {
        console.log("上一帧或下一帧", type);
        if (type == "next") {
          if (
            this.curRealFrame == this.duration ||
            this.curRealFrame > this.duration
          ) {
            this.$message.warning("已经是最后一帧");
            this.curRealFrame == this.duration;
            return;
          }
          this.curRealFrame = this.curRealFrame + 0.04;
        } else if (type == "prev") {
          if (this.curRealFrame == 0 || this.curRealFrame < 0) {
            this.$message.warning("已经是第一帧");
            this.curRealFrame == 0;
            return;
          }
          this.curRealFrame = this.curRealFrame - 0.04;
        }
        const video = document.querySelector(`#${this.video_id}`);
        video.currentTime = this.curRealFrame;
        this.currentTime = this.curRealFrame;
        //测量相关逻辑
        if (this.videoStatus == "noStart" && this.previewImg) {
          if (this.previewImg) {
            this.previewImg = "";
          }
          this.canMeasure = false;
          //是否可以测量
          const { result, VideoParam, target, _index } = this.isCanMeasuer(
            this.currentTime,
            this.info
          );
          this.canMeasure = result;
          this.VideoParam = VideoParam;
          console.log(
            "是否可以测量：",
            this.canMeasure,
            "当前时间：",
            this.currentTime,
            "测量参数:",
            VideoParam,
            "原始数据:",
            target,
            "_index：",
            _index
          );
          //如果可以测量生成当前帧画面
          if (this.canMeasure) {
            this.previewImg = video2Img(video);
          }
        }
      } catch (err) {
        console.log("上一帧或下一帧err", err);
      }
    },
    //监听键盘左右键
    listenerKeyUp(event) {
      const vm = this;
      try {
        if (this.measurePoints.length > 0) {
          console.log("有测量数据");
          return;
        }
        console.log("event.code", event.code);
        if (event.code == "Enter") {
          if (vm.videoStatus == "start") {
            vm.pause();
          } else if (vm.videoStatus == "noStart") {
            vm.play();
          }
        }
        if (event.code == "Equal") {
          vm.speed("quicken");
        }
        if (event.code == "Minus") {
          vm.speed("moderate");
        }
        if (event.code == "ArrowLeft" || event.code == "ArrowUp") {
          if (this.videoStatus == "start") {
            vm.goNext("prev");
          } else if (this.videoStatus == "noStart") {
            vm.goFrame("prev");
          }
        }
        if (event.code == "ArrowRight" || event.code == "ArrowDown") {
          if (this.videoStatus == "start") {
            vm.goNext("next");
          } else if (this.videoStatus == "noStart") {
            vm.goFrame("next");
          }
        }
      } catch (err) {
        console.log(err);
      }
    },
    progressDomEvent(e) {
      try {
        const vm = this;
        if (this.measurePoints.length > 0) {
          console.log("有测量数据");
          return;
        }
        if (e.target.className == `video-progress-pointer`) {
          return;
        }
        console.log(e.offsetX);
        const videoProgressW =
          document.querySelector(".video-progress").offsetWidth;
        const video = document.querySelector(`#${this.video_id}`);
        if (this.duration && video) {
          this.currentTime = (e.offsetX / videoProgressW) * this.duration;
          video.currentTime = this.currentTime;
          this.curRealFrame = this.currentTime;
          let first_outweigh;
          if (this.scanInfo.length > 0) {
            this.scanInfo.forEach((item, index) => {
              if (this.currentTime > item.endTime) {
                first_outweigh = index;
              }
            });
          }
          console.log("第一个大于鼠标点击点的下标", first_outweigh);
          if (first_outweigh) {
            this.curFrame = first_outweigh - 1 < 0 ? 0 : first_outweigh - 1;
          }
        }
        //测量相关逻辑
        if (this.videoStatus == "noStart" && this.previewImg) {
          if (vm.previewImg) {
            vm.previewImg = "";
          }
          vm.canMeasure = false;
          //是否可以测量
          const { result, VideoParam, target, _index } = this.isCanMeasuer(
            this.currentTime,
            this.info
          );
          this.canMeasure = result;
          this.VideoParam = VideoParam;
          console.log(
            "是否可以测量：",
            this.canMeasure,
            "当前时间：",
            this.currentTime,
            "测量参数:",
            VideoParam,
            "原始数据:",
            target,
            "_index：",
            _index
          );
          //如果可以测量生成当前帧画面
          if (this.canMeasure) {
            this.previewImg = video2Img(video);
          }
        }
      } catch (err) {
        console.log(err);
      }
    },
    //重置数据
    resetInfo() {
      try {
        this.info = "";
        this.hasInfo = false; //是否有视频参数
        this.videoStatus = "noStart";
        this.duration = "";
        this.currentTime = "";
        this.progressPointerLeft = 0;
        this.scanInfo = [];
        this.curSpeed = 1; //视频当前速度
        this.curFrame = -1; //视频当前关键帧
        this.speedIndex = 0;
        this.curRealFrame = 0;
        this.showprogress = false;
        this.VideoParam = null;
        this.canMeasure = false;
        this.previewImg = "";
        this.lesionInfo = [];
      } catch (err) {
        console.log(err);
      }
    },
    dellDriByVideoUrl(url, filename) {
      try {
        console.log(
          "filename",
          filename,
          "url",
          url,
          "filename.includes(url)",
          filename.includes(url)
        );
        return filename.includes(url);
      } catch (err) {
        console.log(err);
      }
    },
    dellVideoUrl(url) {
      try {
        let pathname = new URL(url).pathname;
        if (pathname.startsWith("/")) {
          pathname = pathname.substring(1);
        }
        return pathname;
      } catch (err) {
        console.log(err);
      }
    },
    videoByDir(type) {
      try {
        this.$emit("on-videoByDir", type);
        if (this.measurePoints.length > 0) {
          this.Caliper_stop();
        }
      } catch (err) {
        console.log(err);
      }
    },
    //判断是否可以测量
    isCanMeasuer(curTime, times) {
      try {
        if (!curTime || !times) {
          return {
            result: false,
          };
        }
        let result = false;
        let VideoParam, target, _index;
        for (let j = 0; j < times.length; j++) {
          const i = times[j];
          if (curTime < i.endTime && curTime > i.startTime && i.VideoParam) {
            const params = JSON.parse(i.VideoParam);
            if (params.usParams.length > 0) {
              VideoParam = {};
              params.usParams.forEach((item) => {
                VideoParam[item.name] = item.value;
              });
            }
            result = true;
            target = i;
            _index = j;
            break;
          }
        }
        return {
          result,
          VideoParam,
          target,
          _index,
        };
      } catch (err) {
        console.log(err);
      }
    },
    //测量
    measureHandle() {
      try {
        if (!this.canMeasure) {
          return;
        }
        if (this.fristClick) {
          return;
        }
        setTimeout(() => {
          this.Caliper_start();
        }, 300);
      } catch (err) {
        console.log("测量", err);
      }
    },
    //开始或停止测距
    async Caliper_start() {
      try {
        if (!this.isDraw) {
          this.isDraw = true;
          if (this.canvas) {
            this.canvas.addEventListener("mousedown", this.onMouseDown);
          }
          //判断鼠标移动中是否停留到画过的线上
          if (this.measurePoints.length > 0 && this.canvas) {
            this.canvas.addEventListener("mousemove", this.onMeasuredMove);
          }
          //如果没有测量数据了就不用监听鼠标移动
          if (this.measurePoints.length == 0) {
            this.canvas.removeEventListener("mousemove", this.onMeasuredMove);
          }
        } else {
          this.canvas.removeEventListener("mousedown", this.onMouseDown);
          this.canvas.removeEventListener("mousemove", this.onMouseMove);
          this.canvas.removeEventListener("mousemove", this.onMeasuredMove);
          this.isDraw = false;
          this.fristClick = false;
          this.secondClick = false;
          this.temporaryImgData = null;
        }
      } catch (err) {
        console.log(err);
      }
    },
    //停止测距
    Caliper_stop() {
      try {
        this.canvas.removeEventListener("mousedown", this.onMouseDown);
        this.canvas.removeEventListener("mousemove", this.onMouseMove);
        this.canvas.removeEventListener("mousemove", this.onMeasuredMove);
        this.isDraw = false;
        this.fristClick = false;
        this.secondClick = false;
        this.temporaryImgData = null;
      } catch (err) {
        console.log(err);
      }
    },
    //获取真实的距离
    getRealDIs(p1, p2, curImgParams) {
      try {
        if (!curImgParams) {
          return px2cm(distance(p1, p2));
        } else if (
          curImgParams.usMode != "4" &&
          curImgParams.disPerPixel != "-1.000000"
        ) {
          const oriImg = document.querySelector(`#${this.video_id}`);
          const oriImgW = oriImg.offsetWidth;
          const oriImgH = oriImg.offsetHeight;
          console.log(
            "%c [ 鼠标坐标 ]-2955",
            "font-size:13px; background:pink; color:#bf2c9f;",
            p1,
            p2
          );
          console.log(
            "%c [ 原始图片宽高 ]-2955",
            "font-size:13px; background:pink; color:#bf2c9f;",
            oriImgW,
            oriImgH
          );
          if (!curImgParams.imageW) {
            curImgParams.imageW = 1920;
          }
          if (!curImgParams.imageH) {
            curImgParams.imageH = 1080;
          }
          const real_x1w = (p1.x / oriImgW) * curImgParams.imageW;
          const real_x1h = (p1.y / oriImgH) * curImgParams.imageH;
          const real_x2w = (p2.x / oriImgW) * curImgParams.imageW;
          const real_x2h = (p2.y / oriImgH) * curImgParams.imageH;
          console.log(
            "%c [ 真实坐标 ]-2962",
            "font-size:13px; background:pink; color:#bf2c9f;",
            real_x1w,
            real_x1h,
            real_x2w,
            real_x2h
          );
          const real_dis =
            distance(
              { x: real_x1w, y: real_x1h },
              { x: real_x2w, y: real_x2h }
            ) *
            curImgParams.disPerPixel *
            100;
          console.log(
            "%c [ 真实距离 ]-2964",
            "font-size:13px; background:pink; color:#bf2c9f;",
            real_dis
          );
          return real_dis.toFixed(2);
        } else if (curImgParams.usMode == "4") {
          return px2cm(distance(p1, p2));
        } else {
          return px2cm(distance(p1, p2));
        }
      } catch (err) {
        console.log(err);
      }
    },
    //监听鼠标按下
    onMouseDown(event) {
      if (event.button == 0) {
        //第一次点击
        if (!this.fristClick) {
          //保存临时canvas数据
          this.temporaryImgData = this.ctx.getImageData(
            0,
            0,
            this.width,
            this.height
          );
          this.startX = event.offsetX;
          this.startY = event.offsetY;
          this.fristClick = true;
          this.secondClick = false;
          if (this.canvas) {
            this.canvas.removeEventListener("mousemove", this.onMeasuredMove);
          }
          if (this.canvas && this.fristClick) {
            this.canvas.addEventListener("mousemove", this.onMouseMove);
          }
        } else {
          if (this.startX == event.offsetX && this.startY == event.offsetY) {
            return;
          }
          //若测量数据长度大于10
          if (this.measurePoints.length > 15) {
            this.measurePoints.shift();
            this.drawAllLines(this.measurePoints);
          }
          //第二次点击
          this.canvas.removeEventListener("mousemove", this.onMouseMove);
          this.endX = event.offsetX;
          this.endY = event.offsetY;
          this.real_dis = this.getRealDIs(
            { x: this.startX, y: this.startY },
            { x: this.endX, y: this.endY },
            this.VideoParam
          );
          //将该条线段的点放入集合
          const point_param = {
            id: uuidv4(),
            p1: { x: this.startX, y: this.startY },
            p2: { x: this.endX, y: this.endY },
            flag: 0,
            dis: this.real_dis,
          };
          this.measurePoints.push(point_param);
          this.drawSecond(this.endX, this.endY, this.measurePoints.length);
          this.imgData = this.ctx.getImageData(0, 0, this.width, this.height);
          this.fristClick = false;
          this.secondClick = true;
          if (this.canvas && this.secondClick) {
            this.canvas.addEventListener("mousemove", this.onMeasuredMove);
          }
        }
      } else if (event.button == 2) {
        if (this.fristClick) {
          console.log("第一次点击后鼠标右键!");
          this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
          this.canvas.removeEventListener("mousemove", this.onMouseMove);
          this.fristClick = false;
          this.ctx.putImageData(this.temporaryImgData, 0, 0);
        }
        if (this.secondClick && typeof this.chosePointIndex == "number") {
          console.log("第二次点击后鼠标右键!", this.chosePointIndex);
          this.measurePoints.splice(this.chosePointIndex, 1);
          this.drawAllLines(this.measurePoints);
          this.imgData = this.ctx.getImageData(0, 0, this.width, this.height);
          //如果没有测量数据了就不用监听鼠标移动
          if (this.measurePoints.length == 0) {
            this.canvas.removeEventListener("mousemove", this.onMeasuredMove);
          }
        }
        if (
          !this.fristClick &&
          !this.secondClick &&
          this.measurePoints.length > 0 &&
          typeof this.chosePointIndex == "number"
        ) {
          console.log("啥都没点按右键", this.chosePointIndex);
          this.measurePoints.splice(this.chosePointIndex, 1);
          this.drawAllLines(this.measurePoints);
          this.imgData = this.ctx.getImageData(0, 0, this.width, this.height);
          //如果没有测量数据了就不用监听鼠标移动
          if (this.measurePoints.length == 0) {
            this.canvas.removeEventListener("mousemove", this.onMeasuredMove);
          }
        }
      } else if (event.button == 1) {
        console.log("鼠标滚轮!");
      }
    },
    //监听鼠标移动
    onMouseMove(e) {
      if (e.offsetX) {
        this.draw(e.offsetX, e.offsetY);
      }
    },
    //监听测量后鼠标移动
    onMeasuredMove(e) {
      try {
        const i = this.isPointOnStroke(
          e.offsetX,
          e.offsetY,
          this.measurePoints
        );
        if (typeof i == "number") {
          this.chosePointIndex = i;
        } else {
          this.chosePointIndex = null;
        }
      } catch (err) {
        console.log(err);
      }
    },
    //判断点是否在线上
    isPointOnStroke(px, py, lines) {
      try {
        // 可接受（偏移）范围
        const offset = 10;
        let real_i = "";
        for (var i = 0; i < lines.length; i++) {
          var p1 = lines[i].p1; // 直线起点
          var p2 = lines[i].p2; // 直线终点
          var flag = 0; // 1 - 点中
          var minX = Math.min(p1.x, p2.x); // 较小的X轴坐标值
          var maxX = Math.max(p1.x, p2.x); // 较大的X轴坐标值
          var minY = Math.min(p1.y, p2.y); // 较小的Y轴坐标值
          var maxY = Math.max(p1.y, p2.y); // 较大的Y轴坐标值

          if (p1.y === p2.y) {
            // 水平线
            if (
              px >= minX &&
              px <= maxX &&
              py >= minY - offset &&
              py <= maxY + offset
            ) {
              flag = 1;
              real_i = i;
            }
          } else if (p1.x === p2.x) {
            // 垂直线
            if (
              py >= minY &&
              py <= maxY &&
              px >= minX - offset &&
              px <= maxX + offset
            ) {
              flag = 1;
              real_i = i;
            }
          } else {
            // 斜线 (先判断点是否进入可接受大范围(矩形)，然后再根据直线上的交叉点进行小范围比较)
            if (
              px >= minX &&
              px <= maxX &&
              py >= minY - offset &&
              py <= maxY + offset
            ) {
              //求Y轴坐标
              //方法1：根据tanθ= y/x = y1/x1, 即y = (y1/x1)*x  (该方法有局限性，垂直线(p2.x - p1.x)=0，不能用)
              //var y = ((p2.y - p1.y) / (p2.x - p1.x)) * (px - p1.x);
              //方法2：先求弧度hudu，根据cosθ=x/r, r=x/cosθ,求得r，再根据sinθ=y/r, y=sinθ*r, 求得y
              var hudu = Math.atan2(p2.y - p1.y, p2.x - p1.x); // 直线的弧度(倾斜度)
              // 用三角函数计出直线上的交叉点
              var r = (px - p1.x) / Math.cos(hudu); // 直角三角形的斜边（或理解成圆的半径）
              var y = Math.sin(hudu) * r; // Y轴坐标
              var p = { x: px, y: p1.y + y }; // 直线上的交叉点
              if (
                Math.abs(px - p.x) <= offset &&
                Math.abs(py - p.y) <= offset
              ) {
                flag = 1; // 1 - 点中
                real_i = i;
              }
            }
          }
          if (flag === 1) {
            // lines[i].flag = (lines[i].flag + 1) % 2; // 0、1切换
            lines[i].flag = 1; // 0、1切换
          } else {
            lines[i].flag = 0;
          }
        }
        this.drawAllLines(lines);
        return real_i;
      } catch (err) {
        console.log(err);
      }
    },
    //重画线
    drawAllLines(lines) {
      try {
        if (this.ctx && this.canvas) {
          // 清空画布
          this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
          // 画出逐条线
          for (var i = 0; i < lines.length; i++) {
            var color = lines[i].flag === 1 ? "aqua" : "#ffffff";
            this.drawLine(this.ctx, lines[i].p1, lines[i].p2, i + 1, color);
          }
        }
      } catch (err) {
        console.log(err);
      }
    },
    //画单条线
    drawLine(ctx, p1, p2, dis, color) {
      try {
        this.ctx.fillStyle = color;
        ctx.strokeStyle = color;
        let x, y;
        if (p1.x > p2.x) {
          x = p1.x + 10;
        } else {
          x = p1.x - 20;
        }
        y = p1.y;
        ctx.beginPath();
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.stroke();
        ctx.beginPath();
        // ctx.fillText(`${dis}mm`, p2.x, p2.y);
        ctx.fillText(dis, x, y);
        this.ctx.closePath();
      } catch (err) {
        console.log(err);
      }
    },
    //清除画布
    Caliper_clear() {
      if (this.ctx) {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
    },
    //画虚线
    draw(x, y) {
      if (this.ctx) {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        if (this.imgData) {
          this.ctx.putImageData(this.imgData, 0, 0);
        }
        this.ctx.fillStyle = "#00ffff";
        this.ctx.strokeStyle = "aqua";
        this.ctx.beginPath();
        this.ctx.moveTo(this.startX, this.startY);
        this.ctx.lineTo(x, y);
        this.ctx.stroke();
        // this.ctx.beginPath();
        // this.ctx.fillText(`${dis}mm`, x, y);
        this.ctx.closePath();
      }
    },
    //第二次点击左键时标注
    drawSecond(x, y, dis) {
      if (this.ctx) {
        let x_show, y_show;
        if (this.startX > x) {
          x_show = this.startX + 10;
        } else {
          x_show = this.startX - 20;
        }
        y_show = this.startY;
        this.ctx.fillStyle = "#ffffff";
        this.ctx.strokeStyle = "#ffffff";
        this.ctx.beginPath();
        this.ctx.moveTo(this.startX, this.startY);
        this.ctx.lineTo(x, y);
        this.ctx.stroke();
        this.ctx.beginPath();
        // this.ctx.fillText(`${dis}mm`, x,y);
        this.ctx.fillText(`${dis}`, x_show, y_show);
        this.ctx.closePath();
      }
    },
    //初始化画布
    initCanvas() {
      this.canvas = document.querySelector(`#${this.canvas_id}`);
      const root = document.querySelector(`#${this.video_id}`);
      const root_w = root.offsetWidth;
      const root_h = root.offsetHeight;
      console.log("宽高:", root_w, root_h);
      this.canvas.width = root_w;
      this.canvas.height = root_h;
      this.width = root_w;
      this.height = root_h;
      this.ctx = this.canvas.getContext("2d");
      this.ctx.font = "21px Arial";
      this.ctx.fillStyle = "#00ffff";
      this.ctx.strokeStyle = "aqua";
      this.ctx.lineWidth = 2;
      this.ctx.setLineDash([3, 3]);
    },
    //重置CanvasData
    resetCanvasData() {
      this.isDraw = false;
      this.measurePoints = [];
      this.temporaryImgData = null;
      this.imgData = null;
      this.fristClick = false;
      this.secondClick = false;
      this.chosePointIndex = null;
    },
  },
};
</script>

<style scoped lang="less">
@import "~@/assets/css/videoComp2.less";
</style>
